<template>
	<view>
		<view class="" v-if="search_state==2">
			<u-search input-align="center" v-model="keyword" @custom="searchHandler" @search="searchHandler" bg-color="#ffffff" border-color="#e8e8e8" placeholder="输入药品名/首字母" height="70"></u-search>
		</view>
		<!-- <u-search input-align="center" v-model="keyword" @custom="searchHandler" @search="searchHandler" bg-color="#ffffff" border-color="#e8e8e8" placeholder="输入药品名/首字母" height="70"></u-search> -->
		<view class="history" v-if="!search_list['data']">
			<view class="history_search" v-if="search_state==2">
				<view class="hleft">
					<u-icon name="clock" color="#bdbdbd" size="38"></u-icon>
					<view class="text">历史搜索</view>
				</view>
				<view class="hright" @click="removeHistory">
					<u-icon name="trash" color="#bdbdbd" size="38"></u-icon>
				</view>
			</view>
			<view class="history_tag">
				<u-tag v-for="(item,index) in search_history" :text="search_history[index]" @click="historyTagHandler(item)" :key="index" shape="circle" type="info" />
			</view>
		</view>
		<view class="medicine_list" v-else>
			<!-- https://ypk.familydoctor.com.cn/uploadFile/20141231/medicine/2014122904392794131949.gif -->
			<view class="medicine_item" v-for="(item,index) in search_list.data" :key="index" @click="goInfo(index)">
				<image :src="item.img_url" mode=""></image>
				<view class="item_right">
					<view class="item_right_top">
						<u-tag :text='useMethodTitle(index)' type="primary" mode="dark" size="mini" />
						<view class="title">{{item.name}}</view>
					</view>
					<view class="item_right_bottom">
						{{item.savemethod}}
					</view>
					<u-icon class="arrow-right" color="#5e5e5e" name="arrow-right-double"></u-icon>
				</view>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				keyword: '',  // 查询的关键字
				search_list: {},  // 查询结果集
				// search_list: {
				// 	"data": ['aaa']
				// }
				search_state: 0 // 传来的search参数。如果search=1就是my的搜索历史里面进去的，如果是2就是首页搜索进去的
			};
		},
		onLoad(option) {
			// console.log(option.search);
			this.search_state = option.search
		},
		computed: {
			...mapState('m_medicine', ['test', 'search_history']),
			useMethods() {
				// JSON.parse要求是必须外面的是单引号
				// 所以要将单引号和双引号互换
				
				return function(arr) {
					if(this.search_list['data']) {
						// console.log(arr);
						// let changed = arr.replace(/\"/g,"'").replace(/'/g, '"')
						// return JSON.parse(changed)[0]
					}
				}
				
			}
		},
		methods: {
			...mapMutations('m_medicine', ['updateHistory', 'deleteHistory']),
			async searchHandler() {
				// 如果搜索空的，则是将页面回到历史搜索的页面
				if(this.keyword === '') {
					// console.log('空的');
					this.keyword = ''
					this.search_list = {}
				}
				else {
					const {data: res} = await uni.$http.get('/medicines/search/?name=' + this.keyword)
					this.search_list = res
					// console.log(this.search_list.data);
					uni.$pushNoRepeat(this.keyword, this.search_history)
					this.updateHistory(this.search_history)
				}
				
			},
			removeHistory() {
				this.deleteHistory()
			},
			useMethodTitle(index) {
				let arr = this.search_list.data[index].usemethod.replace(/\"/g,"'").replace(/'/g, '"')
				try {
					let changed = JSON.parse(arr)
					// console.log(changed[0][0][0] + changed[0][1][0]);
					// return '口服'
					return changed[0][0][0] + changed[0][1][0]
				} catch(e) {
					return '口服'
				}
				
				// return '口服'
			},
			goInfo(index) {
				// console.log(index);
				uni.navigateTo({
					url: '../search_info/search_info?index=' + index + '&keyword=' + this.keyword
				})
			},
			historyTagHandler(item) {
				// console.log(item);
				this.keyword = item
				this.searchHandler()
			}
		}
	}
</script>

<style lang="scss">
	.history {
		margin-top: 1rem;
		.history_search {
			display: flex;
			justify-content: space-between;
			.hleft {
				display: flex;
				margin-left: 0.3rem;
				.text {
					margin-left: 0.3rem;
					font-size: 18px;
				}
			}
			.hright {
				margin-right: 0.5rem;
			}
		}
		
		.history_tag {
			margin-top: 1rem;
			margin-left: 1rem;
			display: flex;
			flex-wrap: wrap;
			.u-tag {
				margin: 0.3rem;
			}
		}
	}
	.medicine_list {
		
		.medicine_item {
			margin: 1rem;
			border: 1px solid #d1d1d1;
			border-radius: 5px;
			display: flex;
			image {
				width: 7rem;
				height: 7rem;
			}
			.item_right {
				width: 100%;
				// position: relative;
				.item_right_top {
					display: flex;
					padding: 8px 0 0 8px;
					.title {
						margin-left: 5px;
					}
				}
				.item_right_bottom {
					margin-top: 7px;
					margin-left: 7px;
					// max-width: 12rem;
					color: #bababa;
					font-size: 12px;
				}
				.arrow-right {
					// position: absolute;
					float: right;
					// right: 1rem;
					margin-right: 1rem;
					margin-top: 1rem;
				}
			}
		}
		
	}
</style>
